<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>

<body>
  <div id="app">
    姓：<input type="text" v-model="firstName"><br>
    名：<input type="text" v-model="lastName"><br>
    单向+computed属性方法：<input type="text" v-model="fullName1"><br>
    单向+watch属性：<input type="text" v-model="fullName2"><br>
    双向+computed属性对象+set+get：<input type="text" v-model="fullName3">

    <p>{{firstName}}</p>
    <p>{{firstName}}</p>
    <p>{{firstName}}</p>
  </div>
  <script src="./vue.js"></script>
  <script>
    // vm就是this
    const vm = new Vue({
      el: '#app',
      data: {
        firstName: 'J',
        lastName: 'XD',
        fullName2: ''
      },
      // 计算属性 方法的返回值是属性值 方法名是属性名
      // 执行时间：初始化显示/相关属性发生了变化
      computed: {
        // 单向绑定 fistname+lastname影响fullname
        fullName1() {
          console.log('我执行了！')
          return this.firstName + ' ' + this.lastName
        },
        // 双向绑定 互相影响 注意！！ 这里是对象 不是方法
        fullName3: {
          // 回调函数 计算并返回当前的属性值 回调函数的特点：1.自定义 2.不调用 3，自己执行
          get() {
            return this.firstName + ' ' + this.lastName
          },
          // 
          set(val) {
            this.firstName = val.split(' ')[0]
            this.lastName = val.split(' ')[1]
          }
        }
      },
      // 监视1：配置监视
      watch: {
        // firstName变化
        firstName(newValue, oldValue) {
          console.log('fistName新值：' + newValue, '旧值：' + oldValue)
          this.fullName2 = newValue + ' ' + this.lastName
        }
      },
    })
    // 监视2：vm的实例方法$watch
    vm.$watch('lastName', function (newVal, oldVal) {
      this.fullName2 = this.firstName + ' ' + newVal
    })
  </script>
</body>
</html>